<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="showAdd"
    >{{ $t('add') }}
    </el-button>
    <el-table
      :data="deviceBelongRuleGroupList"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        :label="$t('name')"
      />
      <el-table-column
        :label="$t('type')"

      >
        <template slot-scope="scope">
          <span>{{ $t(scope.row.bindType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="bindIdName"
        :label="$t('name')"
      />
      <el-table-column width="210" :label="$t('function')" >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog

      :visible.sync="showUpdateDeviceBelongRuleGroup"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="deviceBelongRuleGroup.name" />
        </el-form-item>
        <el-form-item v-if="!deviceBelongRuleGroup.ruleGroupId" :label="$t('type')">
          <el-select v-model="deviceBelongRuleGroup.bindType" @change="bindTypeChange">
            <el-option
              v-for="item in bindTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!deviceBelongRuleGroup.ruleGroupId" :label="$t('id')">
          <el-select v-model="deviceBelongRuleGroup.bindId">
            <el-option
              v-for="item in bindIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateDeviceBelongRuleGroup = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listDeviceBelongRegion } from '@/api/iot/iotDeviceBelongRegionApi'
import {
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  getCompanyId,
  getShortCompanyName
} from '@/util/storage'
import {
  cityDeviceNum,
  provinceDeviceNum,
  productDeviceNum,
  seriesDeviceNum
} from '@/api/iot/iotDeviceApi'
import {
  listDeviceBelongRuleGroup,
  deleteDeviceBelongRuleGroup,
  insertDeviceBelongRuleGroup,
  updateDeviceBelongRuleGroup
} from '@/api/iot/iotDeviceBelongRuleGroupApi'
import { listAllCompany } from '@/api/auth/authCompanyApi'
export default {
  name: 'DeviceBelongRuleGroup',
  data() {
    return {
      companyId: getCompanyId(),
      companyName: getShortCompanyName(),
      deviceBelongRuleGroupList: [],
      deviceBelongRuleGroup: {},
      showUpdateDeviceBelongRuleGroup: false,

      bindIdList: [],
      bindTypeList: [
        {
          value: 'product',
          label: this.$t('product')
        },
        {
          value: 'series',
          label: this.$t('series')
        },
        {
          value: 'province',
          label: this.$t('province')
        },
        {
          value: 'city',
          label: this.$t('city')
        },
        {
          value: 'company',
          label: this.$t('company')
        },
        {
          value: 'region',
          label: this.$t('region')
        }
      ]
    }
  },
  created() {
    this.listDeviceBelongRuleGroup()
  },
  methods: {
    bindTypeChange(bindType) {
      switch (bindType) {
        case 'product':
          productDeviceNum({
            companyId: this.companyId
          }).then(res => {
            const { code, data } = res
            if (code === '200') {
              const bindIdList = []
              data.forEach(item => {
                bindIdList.push({
                  value: item.productId,
                  label: item.name
                })
              })
              this.bindIdList = bindIdList
            }
          })
          break
        case 'series':
          seriesDeviceNum({
            companyId: this.companyId
          }).then(res => {
            const { code, data } = res
            if (code === '200') {
              const bindIdList = []
              data.forEach(item => {
                bindIdList.push({
                  value: item.seriesId,
                  label: item.name
                })
              })
              this.bindIdList = bindIdList
            }
          })
          break
        case 'province':
          provinceDeviceNum({
            companyId: this.companyId
          }).then(res => {
            const { code, data } = res
            if (code === '200') {
              const bindIdList = []
              data.forEach(item => {
                bindIdList.push({
                  value: item.provinceId,
                  label: item.province
                })
              })
              this.bindIdList = bindIdList
            }
          })
          break
        case 'city':
          cityDeviceNum({
            companyId: this.companyId
          }).then(res => {
            const { code, data } = res
            if (code === '200') {
              const bindIdList = []
              data.forEach(item => {
                bindIdList.push({
                  value: item.cityId,
                  label: item.city
                })
              })
              this.bindIdList = bindIdList
            }
          })
          break
        case 'company':
          listAllCompany({
            parentCompanyId: getCompanyId()
          }).then(res => {
            const { data, code } = res
            if (code === '200') {
              data.unshift({
                companyId: parseInt(getCompanyId()),
                companyName: getShortCompanyName()
              })
              const bindIdList = []
              data.forEach(item => {
                bindIdList.push({
                  value: item.companyId,
                  label: item.companyName
                })
              })
              this.bindIdList = bindIdList
            }
          })
          break
        case 'region':
          listDeviceBelongRegion({
            companyId: this.companyId
          }).then(res => {
            const { code, data } = res
            if (code === '200') {
              const bindIdList = []
              data.forEach(item => {
                bindIdList.push({
                  value: item.regionId,
                  label: item.name
                })
              })
              this.bindIdList = bindIdList
            }
          })
          break
      }
    },
    showAdd() {
      this.deviceBelongRuleGroup = {
        companyId: this.companyId
      }
      this.showUpdateDeviceBelongRuleGroup = true
    },
    addOrUpdate() {
      if (!this.deviceBelongRuleGroup.ruleGroupId) {
        insertDeviceBelongRuleGroup({
          ...this.deviceBelongRuleGroup
        }).then(res => {
          const { code } = res
          this.listDeviceBelongRuleGroup()
          if (code === '200') {
            this.showUpdateDeviceBelongRuleGroup = false
          }
        })
      } else {
        updateDeviceBelongRuleGroup({
          ...this.deviceBelongRuleGroup
        }).then(res => {
          const { code } = res
          this.listDeviceBelongRuleGroup()
          if (code === '200') {
            this.showUpdateDeviceBelongRuleGroup = false
          }
        })
      }
    },
    edit(item) {
      this.deviceBelongRuleGroup = item
      this.showUpdateDeviceBelongRuleGroup = true
    },
    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceBelongRuleGroup({
            ruleGroupId: item.ruleGroupId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listDeviceBelongRuleGroup()
            }
          }
          )
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    listDeviceBelongRuleGroup() {
      listDeviceBelongRuleGroup({
        companyId: this.companyId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.deviceBelongRuleGroupList = data
        }
      })
    }
  }
}
</script>


